<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>显示模式</title>
		<style>
		h4,p,span,del,a,input
		{
			background-color: aqua;  /* 背景颜色 */
			width:300px;
			height:200px;
			margin: auto;	/* 给盒子设置水平居中 */
			text-allign:center;		/* 文本居中 */
		}
		a{
			display:block;	/* 将a标签转换块元素 */
		}
		</style>
	</head>
	<body>
		<!-- 标签的显示模式
		1.快元素: block
		比较霸道，单独占一行
		默认的宽度是父级宽度的%100
		可以设置 宽，高和对齐属性
		快元素可以包含行内元素和其他快元素
		文本标签 (h1~h6,p,div,ui,ol,li) 内不要再装快元素
		
		2.行内元素:inline
		一行显示多个
		默认的宽度是内容的宽度
		宽，高和对齐属性设置无效
		行内元素只包含文本或其他行内元素，一般不包含快元素
		链接标签里不要再包含其他链接	
		<a><a/>,<strong>,<em><span>
		
		3.行内快元素:inline-block
		一行显示多个
		默认的宽度是内容的宽度
		可以设置 宽，高和对齐属性
		<input/>,<img/>,<td><td/>
		元素显示模式的转换:
		display:block/inline/inline-block;
		 -->
		<h4>小米su7</h4>
		<p>性能旋风...</p>
		<span>2399</span>
		<del>2499999</del>
		<a href="#">百度一下</a>
		<input type="text"/>
		<input type="password"/>
		
	</body>
</html>
